<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {onBeforeUnmount, shallowRef} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'

export default {
    name: 'ElEditor',
    components: {Editor, Toolbar},
    props: ['modelValue','height'],
    emits: ['update:modelValue'],
    setup() {
        // 编辑器实例，必须用 shallowRef
        const editorRef = shallowRef()

        const toolbarConfig = {}
        let editorConfig = {
            placeholder: '请输入内容...',
            MENU_CONF: {
                uploadImage: {
                    fieldName: 'file',
                    server: '/api/upload',
                    maxFileSize: 5 * 1024 * 1024, // 5M
                    maxNumberOfFiles: 5,  // 最多可上传几个文件，默认为 100
                    // 自定义增加 http  header
                    headers: {
                        token: localStorage.getItem('token'),
                    },
                    // 跨域是否传递 cookie默认为 false
                    withCredentials: true,
                    customInsert(res, insertFn) {
                        insertFn(res.data, "", "")
                    },
                },
                uploadVideo: {
                    fieldName: 'file',
                    server: '/api/upload',
                    maxFileSize: 3 * 1024 * 1024, // 3M
                    maxNumberOfFiles: 5,  // 最多可上传几个文件，默认为 100
                    // 自定义增加 http  header
                    headers: {
                        token: localStorage.getItem('token'),
                    },
                    // 跨域是否传递 cookie默认为 false
                    withCredentials: true,
                    customInsert(res, insertFn) {
                        insertFn(res.data, "")
                    },
                },
            }
        }

        // 组件销毁时，也及时销毁编辑器
        onBeforeUnmount(() => {
            const editor = editorRef.value
            if (editor == null) return
            editor.destroy()
        })

        // 记录 editor 实例，重要！
        const handleCreated = (editor) => {
            editorRef.value = editor
        }

        return {
            editorRef,
            mode: 'default', // 或 'simple'
            toolbarConfig,
            editorConfig,
            handleCreated
        };
    },
    computed: {
        value: {
            get() {
                return this.modelValue
            },
            set(value) {
                this.$emit('update:modelValue', value)
            }
        }
    }
}
</script>

<template>
    <div style="border: 1px solid #ccc">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            :style="{
                height: height || '300px',
                width: '100%',
                overflowY: 'hidden',
            }"
            v-model="value"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
        />
    </div>
</template>

<style scoped>
.w-e-full-screen-container {
    z-index: 999;
}
</style>